<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				/*2*left + right*/
				min-width: 600px;
			}

			.header,
			.footer {
				height: 20px;
				border: 1px solid red;
				background: gray;
				text-align: center;
			}

			.content {
				/*真的奇怪，如果加这个border，那么改变浏览器大小就会破坏当前的圣杯布局*/
				/* border: 1px solid blue; */
				padding: 0 200px;
			}

			.content .middle {
				background: pink;

				float: left;

				width: 100%;
			}

			.content .left {
				/* background: yellow;

				float: left;
				width: 200px;

				margin-left: -100%;

				position: relative;
				left: -200px; */
				margin-left: -100%;
				float: left;
				width: 200px;
				background: yellow;
				position: relative;
				left: -200px;
			}

			.content .right {
				background: blue;

				float: left;
				width: 200px;

				margin-left: -200px;

				position: relative;
				right: -200px;
			}

			.clearfix {
				*zoom: 1;
			}

			.clearfix:after {
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="header">header</div>
		<div class="content clearfix">
			<!--
			 1 将left middl right三个塞到一行。对left和right使用float
			 2 解决“高度塌陷”，让footer保持原来的位置
			 3 middle必须放在最上面，确保最先加载
			 4 调整边界，使用margin-left。老实说我也是一知半解。
			 5 使用padding+relative定位，修改left和right的位置。
			 -->
			<div class="middle">middle</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div class="footer">footer</div>
	</body>
</html>
